<template>
    <!-- 提示弹窗 -->
    <uni-popup ref="popup" :mask-click="false">
        <div class="container">
            <div class="head">
                <text class="text">嗨喵科技代码：000365</text>
            </div>
            <div class="content">
                <text v-if="!props.success" class="failure">很遗憾</text>
                <text v-if="props.success" class="money-text">{{ props.money }}</text>
                <text v-if="props.success" class="yuan">元</text>
            </div>
            <text class="desc">{{props.success?'恭喜抽中幸运红包':'红包已经被抢光啦！'}}</text>
            <div class="i-know" @click="close">
                <text class="text">{{props.success?'立即收下':'知道啦'}}</text>
            </div>
        </div>
    </uni-popup>
</template>

<script setup lang="ts">

type Props = {
  money: string;
  success:boolean;
};

const props = withDefaults(defineProps<Props>(), { money: "188.8" , success:true});

const popup = ref<UniHelper.UniPopupInstance>();

/** 弹窗打开 */
const open = () => {
  if (!popup.value?.open) return;
  popup.value?.open();
};

/** 弹窗关闭 */
const close = () => {
  if (!popup.value?.close) return;
  popup.value?.close();
  emit('popupClose');
};

defineExpose({
  open,
  close,
});

const emit = defineEmits<{(event: 'clickRule'): void,
  (event: 'popupClose'): void
}>();

</script>

<style scoped lang="scss">
.container {
    position: relative;

    width: 692rpx;
    height: 554rpx;

    background-image: url("https://ustatic.hudongmiao.com/miao/activity/202505/hongbao4.png");
    background-size: 692rpx 554rpx;
    box-shadow: 0px 7 19px 0px rgba(0, 0, 0, 0.3);
    border-radius: 41rpx 41rpx 41rpx 41rpx;



    .container-bg {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;

        width: 100%;
        height: 100%;
    }

    .head {
        position: absolute;
        top: 42rpx;
        left: 215rpx;
        z-index: 100;
        width: 278rpx;
        height: 43rpx;
        background: #E80000;
        border-radius: 0rpx 0rpx 15rpx 15rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        .text {
            width: 241rpx;
            height: 32rpx;
            font-weight: 400;
            font-size: 22rpx;
            color: #FFFFFF;
            line-height: 32rpx;
            text-align: center;
            font-style: normal;
            text-transform: none;
        }
    }

    .content {
        position: absolute;
        top: 108rpx;
        left: 188rpx;
        z-index: 100;
        width: 326rpx;
        height: 131rpx;
        // background: black;
        border-radius: 0rpx 0rpx 15rpx 15rpx;
        display: flex;
        justify-content: center;
        align-items: flex-end;

        .failure{
            font-weight: 700;
            font-size: 60rpx;
            color: #E80000;
            line-height: 1;
            text-align: end;
            font-style: normal;
            text-transform: none;
        }

        .money-text {
            font-weight: 700;
            font-size: 90rpx;
            color: #E80000;
            line-height: 1;
            text-align: end;
            font-style: normal;
            text-transform: none;
        }

        .yuan {
            font-weight: 500;
            font-size: 34rpx;
            color: #E80000;
            line-height: 40rpx;
            text-align: end;
            font-style: normal;
            text-transform: none;
        }
    }

    .desc {
        position: absolute;
        top: 352rpx;
        left: 225rpx;
        z-index: 100;
        height: 43rpx;
        font-weight: 500;
        font-size: 30rpx;
        color: #FFFFFF;
        line-height: 43rpx;
        text-align: center;
        font-style: normal;
        text-transform: none;
        display: flex;
        justify-content: center;
        align-items: center;
    }


    .i-know {
        position: absolute;
        top: 432rpx;
        left: 220rpx;
        z-index: 100;
        width: 257rpx;
        height: 95rpx;
        background-image: url("https://ustatic.hudongmiao.com/miao/activity/202505/yellowButton2.png");
        background-size: 257rpx 95rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        .text {
            font-weight: 500;
            font-size: 34rpx;
            color: #FFFFFF;
            line-height: 49rpx;
            text-align: center;
            font-style: normal;
            text-transform: none;
        }
    }

}
</style>
